<template>
  <div>
    <div class="header-container">
      <div class="width-box">
        <div class="title-container">
          <div class="left-container">
            <img
              :src="require('@/assets/img/courseSelect/tollTitle.png')"
              alt=""
              class="title-img-big"
            />
            <img
              :src="require('@/assets/img/courseSelect/tollTitleSmall.png')"
              alt=""
              class="title-img-small"
            />
          </div>
          <div class="right-container">
            <el-input
              v-model="searchName"
              placeholder="搜索感兴趣的实战课程内容"
              class="search-input"
              @keyup.enter.native="toGetCourseList"
              clearable
              @clear="toGetCourseList"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                class="search-button"
                @click="toGetCourseList"
              ></el-button>
            </el-input>
            <div class="hot-search-container">
              <span class="hot-title">热搜：</span>
              <div class="hot-label">
                <span>Java工程师</span>
                <span>Vue</span>
                <span>Python</span>
                <span>Go</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 筛选组件 -->
        <div class="select-container">
          <!-- 方向 -->
          <div class="direction-wrap select-common">
            <span class="select-title">方向：</span>
            <div class="select-labels">
              <span
                v-for="(item, index) in selectOptionsAsync"
                :key="index"
                :class="{ 'active-select': flagDirection == index }"
                @click="optChange('direction', item.direction, index)"
              >
                {{ item.direction }}
              </span>
            </div>
          </div>
          <!-- 分类 -->
          <div class="type-wrap select-common">
            <span class="select-title">分类：</span>
            <div class="select-labels">
              <span
                v-for="(item, index) in typeList"
                :key="index"
                :class="{ 'active-select': flagType == index }"
                @click="optChange('type', item, index)"
              >
                {{ item.value }}
              </span>
            </div>
          </div>
          <!-- 难度 -->
          <div class="level-wrap select-common">
            <span class="select-title">难度：</span>
            <div class="select-labels">
              <span
                v-for="(item, index) in levelList"
                :key="index"
                :class="{ 'active-select': flagLevel == index }"
                @click="optChange('level', item, index)"
              >
                {{ item }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="course-list-container">
      <div class="width-box">
        <div class="option-select-container">
          <span
            v-for="(item, index) in optionList"
            :key="index"
            :class="{ 'active-opt': flagOption == index }"
            @click="optChange('option', item, index)"
          >
            {{ item }}
          </span>
        </div>
        <div class="course-list-block">
          <el-card
            v-for="(item, index) in courseList"
            :key="index"
            class="course-block"
            @click.native="toCourse(item.id)"
          >
            <img :src="item.image" class="image" />
            <div class="course-info">
              <div class="course-name">{{ item.courseName }}</div>
              <div class="course-applay">
                {{ `${item.level} · ${item.enroll}人报名` }}
              </div>
              <div class="course-value">
                <span class="value-span">￥{{ item.price }}</span>
                <span
                  class="add-shopping-cart"
                  @click.stop="addToShopping(item.id)"
                  >加购物车</span
                >
              </div>
            </div>
          </el-card>
        </div>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="toGetCourseList"
          @current-change="toGetCourseList"
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getOptions, getCourseList } from "@/services/courseList";
import {
  addCartCourse,
  getCartCourse,
  getUserCourseList,
} from "@/services/user";

export default {
  props: {
    direction: { default: 0 },
    type: { default: 0 },
    level: { default: 0 },
  },
  data() {
    return {
      searchName: "",
      selectOptionsAsync: [],
      typeList: [],
      levelList: ["零基础", "初阶", "进阶", "高阶"],
      optionList: ["推荐", "最新", "最热"],
      flagDirection: 0,
      flagType: 0,
      flagLevel: 0,
      flagOption: 0,
      currentPage: 1,
      pageSize: 20,
      count: 0,
      courseList: [],
      cartCourse: [],
      hadCourseList: [],
    };
  },
  methods: {
    getOptionsList() {
      getOptions().then((res) => {
        const data = res.data;
        if (data.data) {
          this.selectOptionsAsync = data.data;
          this.flagDirection = this.direction;
          this.flagType = this.type;
          this.typeList =
            this.selectOptionsAsync[this.flagDirection].courseTypeDtos;
          this.flagLevel = this.level;
          this.toGetCourseList();
        }
      });
    },
    // 搜索课程
    // 设置筛选组件的课程分类
    setType(index = 0) {
      this.typeList = this.selectOptionsAsync[index].courseTypeDtos;
      this.flagType = 0;
    },
    initData() {
      this.getOptionsList();

      this.typeList = this.selectOptionsAsync[this.flagDirection].type;
    },
    // 点击筛选组件
    optChange(str, value, index) {
      this.currentPage = 1;
      this.searchName = "";
      if (str == "direction") {
        this.flagDirection = index;
        this.setType(index);
        this.toGetCourseList();
      } else if (str == "type") {
        this.flagType = index;
        this.toGetCourseList();
      } else if (str == "level") {
        this.flagLevel = index;
        this.toGetCourseList();
      } else if (str == "option") {
        this.flagOption = index;
        this.toGetCourseList();
      }
    },
    // 获取课程列表
    toGetCourseList() {
      let params = {
        searchName: this.searchName,
        direction: this.selectOptionsAsync[this.flagDirection].id,
        type: this.typeList[this.flagType].id,
        level: this.levelList[this.flagLevel],
        option: this.optionList[this.flagOption],
        isFree: 0,
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      getCourseList(params).then((res) => {
        const data = res.data;
        if (data.data.courseInfos.length) {
          this.courseList = data.data.courseInfos;
          this.count = data.data.total;
        } else {
          this.courseList = [];
          this.$message("暂无数据");
        }
      });
    },
    addToShopping(courseId) {
      let hadFlag = this.hadCourseList.some((item) => item.id == courseId);
      let inCartFlag = this.cartCourse.some((item) => item.id == courseId);
      if (hadFlag || inCartFlag) {
        this.$confirm("", hadFlag ? "课程已购买" : "课程已经在购物车中", {
          confirmButtonText: "去购物车结算",
          cancelButtonText: "继续逛逛",
          type: "success",
          iconClass: "el-icon-success",
          center: true,
        })
          .then(() => {
            this.$myUtils.OpenNewWindow("/shoppingCart/cart", {});
          })
          .catch(() => {});
      } else {
        addCartCourse({ courseId }).then((res) => {
          this.getShoppingCourse();
          this.$confirm("", "添加购物车成功", {
            confirmButtonText: "去购物车结算",
            cancelButtonText: "继续逛逛",
            type: "success",
            iconClass: "el-icon-success",
            center: true,
          })
            .then(() => {
              this.$myUtils.OpenNewWindow("/shoppingCart/cart", {});
            })
            .catch(() => {});
        });
      }
    },
    getShoppingCourse() {
      getCartCourse().then((res) => {
        this.cartCourse = res.data.data || [];
      });
    },
    getHadCourseList() {
      getUserCourseList().then((res) => {
        let had = res.data.data || [];
        this.hadCourseList = had.filter((item) => {
          return !item.free;
        });
      });
    },
    toCourse(courseId) {
      this.$myUtils.OpenNewWindow("/courseDetail", { id: courseId });
    },
  },
  created() {
    this.getOptionsList();
    this.getShoppingCourse();
    this.getHadCourseList();
  },
};
</script>
<style lang="scss" scoped>
.width-box {
  width: 1430px;
  margin: 0 auto;
}
.header-container {
  .title-container {
    display: flex;
    padding-top: 8px;
    height: 81px;
    justify-content: space-between;
    align-items: center;
    .left-container {
      display: flex;
      align-items: center;
      height: 46px;
      .title-img-big {
        height: 100%;
        margin-right: 8px;
      }
      .title-img-small {
        height: 12px;
        padding-top: 8px;
      }
    }
    .right-container {
      ::v-deep .search-input {
        margin: 17px 0 7px 0;
        .el-input__inner {
          height: 36px;
          width: 280px;
          background-color: rgb(243, 245, 246);
          font-size: 12px;
          &:focus {
            border-color: #c0c4cc;
            outline-color: #c0c4cc;
          }
        }
        .search-button {
          height: 37px;
          width: 30px;
          background: #545c63;
          color: white;
          border-radius: 0 5px 5px 0;
          display: flex;
          justify-content: center;
        }
      }
      .hot-search-container {
        font-size: 12px;
        color: rgba(84, 92, 99, 0.7);
        display: flex;
        .hot-title {
          margin-left: 18px;
        }
        .hot-label {
          span {
            margin-right: 14px;
          }
        }
      }
    }
  }
  .select-container {
    height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 72px;
    .select-common {
      display: flex;
      height: 32px;
      width: 100%;
      .select-title {
        width: 42px;
        margin-right: 6px;
        font-weight: bold;
        display: flex;
        align-items: center;
      }
      .select-labels {
        color: #545c63;
        flex: 1;
        display: flex;
        align-items: center;
        span {
          display: flex;
          align-items: center;
          height: 32px;
          padding: 0 8px;
          margin-right: 12px;
          cursor: pointer;
        }
      }
    }
  }
}

.course-list-container {
  background-color: white;
  .width-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    .option-select-container {
      width: 100%;
      height: 25px;
      padding: 30px 0 20px;
      font-size: 12px;
      display: flex;
      span {
        padding: 4px 12px;
        margin-right: 8px;
        cursor: pointer;
      }
      .active-opt {
        background-color: #545c63;
        border-radius: 100px;
        color: white;
      }
    }
    .course-list-block {
      display: flex;
      flex-wrap: wrap;
      min-height: 580px;
      width: 100%;
      .course-block {
        box-sizing: border-box;
        width: 270px;
        height: 270px;
        border-radius: 8px;
        margin-bottom: 20px;
        margin-right: 20px;
        cursor: pointer;
        &:nth-child(5n) {
          margin-right: 0;
        }
        ::v-deep .el-card__body {
          display: flex;
          flex-direction: column;
          padding: 0;
          .image {
            width: 100%;
            height: 152px;
            margin-bottom: 8px;
          }
          .course-info {
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 0 8px;
            .course-name {
              width: 254px;
              height: 40px;
              line-height: 20px;
              font-size: 14px;
              margin-bottom: 8px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .course-applay,
            .course-value {
              height: 18px;
              width: 254px;
              margin-bottom: 8px;
              font-size: 12px;
              color: #9199a1;
            }
            .course-value {
              display: flex;
              justify-content: space-between;
              height: 20px;
              color: $primary-color;
              .value-span {
                font-weight: bold;
              }
              .add-shopping-cart {
                position: relative;
                &::before {
                  content: "";
                  display: block;
                  position: absolute;
                  transform: translate(-110%, 10%);
                  background: url("~@/assets/icon/courseSelect/购物车.png") 0 0
                    no-repeat;
                  width: 12px;
                  height: 12px;
                }
              }
            }
          }
        }
      }
    }
    .el-pagination {
      margin: 25px 0 30px;
    }
  }
}

.active-select {
  background: rgba(233, 142, 70, 0.1);
  border-radius: 6px;
  font-weight: bold;
  color: #e98e46;
}
</style>